// 一、守卫 ： 类似js里的if语句；

// 1.普通守卫函数
// 定义守卫函数
// .common(@num) when(@num>100){
//     width: 110px;
//     height: 110px;
//     background-color: red;
// }

// .common(@num) when(@num<=100){
//     width: 50px;
//     height: 50px;
//     background-color: blue;
// }

// // 调用

// .box{
//     .common(80);
// }
// .box2{
//     .common(130);
// }


// 2.连接守卫条件 通过  and 连接多个条件  是且的关系 
// 可以通过 , 连接 是或者的关系 ；
// .common(@num) when(@num<100) , (@num>200){
//     width: 30px;
//     height: 30px;
//     background-color: red;
// }
// .common(@num) when(@num>=100) and (@num<=200){
//     width: 130px;
//     height: 130px;
//     background-color: blue;
// }

// .box1{
//     .common(220);
// }

// .box2{
//     .common(150);
// }


// 二、预定义函数 ；

// if语句
// @flag:false;
// .box{
//     width: if((@flag)100px,200px);
//     height: 300px;
// }

// 转换类型 
// @flag:boolean(5<3);
// .box{
//     height: @flag;
//     width: if((@flag)100px,200px);
// }


// 数学函数的转换

@a:100px;
@b:30px;
.box{
    width: ceil((@a/@b));
    height: floor((@a/@b));
}


// 三、less 的模块化
// @import "路径";
// @import "./common.less";


// 四、字符串的拼接
// 字符串里解析变量 也是通过  @{变量};
@url:"1.png";
// images/1.png
.box2{
    background-image: "images/@{url}";
}